<!DOCTYPE html>

<html xmlns:th="http://www.thymeleaf.org">
<html xmlns:wb="http://open.weibo.com/wb">
<head>
    <meta http-equiv="Content-Type" content="text/html; Charset=utf-8">
    <script src="https://tjs.sjs.sinajs.cn/open/api/js/wb.js" type="text/javascript" charset="utf-8"></script>
    <meta http-equiv="Content-Language" content="zh-CN">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
    <title>个人博客</title>
    <link rel="shortcut icon" href="/img/Logo_40.png" type="image/x-icon">
    <!--Layui-->
    <link href="/layui/css/layui.css" rel="stylesheet"/>
    <!--font-awesome-->
    <link href="/plugns/font-awesome/css/font-awesome.min.css" rel="stylesheet"/>
    <!--全局样式表-->
    <link href="/css/global.css" rel="stylesheet"/>
    <!-- 本页样式表 -->
    <link href="/css/home.css" rel="stylesheet"/>
    <style type="text/css">
        .layui-flow-more{
            color: #ef4f3d;

        }


    </style>
</head>
<body>
<!-- 导航 -->
<nav class="blog-nav layui-header">
    <div class="blog-container" th:if="${session.thirdLoginUser!=null}">
        <!-- QQ互联登陆 -->
        <a class="blog-user"href = "javascript:void(0);" onclick ="qqloginOut()" >
            <img th:src="@{${session.thirdLoginUser.avatar}}" alt="点我退出" title="点我退出"/>
            <cite id="nickName" class="layui-hide-xs" th:text="${session.thirdLoginUser.nickName}"></cite>
        </a>
        <!-- 导航菜单 -->
        <ul class="layui-nav" lay-filter="nav">
            <li class="layui-nav-item layui-this">
                <a href="/blog/toHome"><i class="fa fa-home fa-fw"></i>&nbsp;网站首页</a>
            </li>
            <li class="layui-nav-item">
                <a href="/blog/toArticle"><i class="fa fa-file-text fa-fw"></i>&nbsp;文章专栏</a>
            </li>
            <li class="layui-nav-item">
                <a href="/blog/toResource"><i class="fa fa-tags fa-fw"></i>&nbsp;资源分享</a>
                <dl class="layui-nav-child">
                    <dd><a href="/blog/toResource?categoryName=图片">图片</a></dd>
                    <dd><a href="/blog/toResource?categoryName=源码">源码</a></dd>
                    <dd><a href="/blog/toResource?categoryName=电子书">电子书</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item">
                <a href="/blog/toTimeline"><i class="fa fa-hourglass-half fa-fw"></i>&nbsp;点点滴滴</a>
            </li>
            <li class="layui-nav-item">
                <a href="/blog/about"><i class="fa fa-info fa-fw"></i>&nbsp;关于本站</a>
            </li>
        </ul>
        <!-- 手机和平板的导航开关 -->
        <a class="blog-navicon" href="javascript:;">
            <i class="fa fa-navicon"></i>
        </a>
    </div>
    <div class="blog-container" th:if="${session.thirdLoginUser==null}">
        <!-- QQ互联登陆 -->
<!--        <a th:href="@{/qq/auth(status=2)}" class="blog-user">-->
<!--            <i class="fa fa-qq"></i>-->
<!--        </a>-->
        <a href = "javascript:void(0);" onclick ="logins()"  class="blog-user">
            <i class="fa fa-qq"></i>
        </a>
        <!-- 不落阁 -->
        <a class="blog-logo" href="">墨殇</a>
        <!-- 导航菜单 -->
        <ul class="layui-nav" lay-filter="nav">
            <li class="layui-nav-item layui-this">
                <a href="/blog/toHome"><i class="fa fa-home fa-fw"></i>&nbsp;网站首页</a>
            </li>
            <li class="layui-nav-item">
                <a href="/blog/toArticle"><i class="fa fa-file-text fa-fw"></i>&nbsp;文章专栏</a>

            </li>
            <li class="layui-nav-item">
                <a href="/blog/toResource"><i class="fa fa-tags fa-fw"></i>&nbsp;资源分享</a>
                <dl class="layui-nav-child">
                    <dd><a href="/blog/toResource?categoryName=图片">图片</a></dd>
                    <dd><a href="/blog/toResource?categoryName=源码">源码</a></dd>
                    <dd><a href="/blog/toResource?categoryName=电子书">电子书</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item">
                <a href="/blog/toTimeline"><i class="fa fa-hourglass-half fa-fw"></i>&nbsp;点点滴滴</a>
            </li>
            <li class="layui-nav-item">
                <a href="/blog/about"><i class="fa fa-info fa-fw"></i>&nbsp;关于本站</a>
            </li>
        </ul>
        <!-- 手机和平板的导航开关 -->
        <a class="blog-navicon" href="javascript:;">
            <i class="fa fa-navicon"></i>
        </a>
    </div>
</nav>
<!-- 主体（一般只改变这里的内容） -->
<div class="blog-body">
    <!-- canvas -->
    <canvas id="canvas-banner" style="background: #393D49;"></canvas>
    <!--为了及时效果需要立即设置canvas宽高，否则就在home.js中设置-->
    <script type="text/javascript">
        var canvas = document.getElementById('canvas-banner');
        canvas.width = window.document.body.clientWidth - 10;//减去滚动条的宽度
        if (screen.width >= 992) {
            canvas.height = window.innerHeight * 1 / 3;
        } else {
            canvas.height = window.innerHeight * 2 / 7;
        }
    </script>
    <!-- 这个一般才是真正的主体内容 -->
    <div class="blog-container">
        <div class="blog-main">
            <!-- 网站公告提示 -->
            <div class="home-tips shadow">
                <i style="float:left;line-height:17px;" class="fa fa-volume-up"></i>
                <div class="home-tips-container">
                    <span style="color: #009688">功能正在完善中，不要嫌弃现在的丑！</span>
                    <span style="color: red">网站仅支持qq登录评论和留言！</span>
                    <span style="color: red">源码地址！<a href="https://github.com/minghaozhi/blog" target="_blank"
                                                     style="color:#01AAED">点我前往</a></span>
                </div>
            </div>
            <!--左边文章列表-->
            <div class="blog-main-left" id="demo"></div>


            <!--右边小栏目-->
            <div class="blog-main-right">
                <input type="hidden" id="name">
                <blockquote class="layui-elem-quote layui-bg-green">
                    <div id="nowTime"></div>
                </blockquote>
                <div class="blogerinfo shadow">
                    <div class="blogerinfo-figure">
                        <img src="/img/user.jpg" alt="user" height="100" width="100"/>
                    </div>
                    <p class="blogerinfo-nickname">moshang</p>
                    <p class="blogerinfo-introduce">一枚北漂程序猿</p>
                    <p class="blogerinfo-location"><i class="fa fa-location-arrow"></i>&nbsp;北京</p>
                    <hr/>
                    <div class="blogerinfo-contact">
                        <a target="_blank" href="tencent://message/?uin=597575122&Site=www.moshang.work&Menu=yes"
                           title="QQ交流"><i class="fa fa-qq fa-2x"></i></a>
                        <a target="_blank" title="给我写信" href="javascript:layer.msg('启动邮我窗口')"><i
                                class="fa fa-envelope fa-2x"></i></a>
                        <a target="_blank" title="新浪微博" href="https://weibo.com/u/2402978411/home?wvr=5&lf=reg"><i
                                class="fa fa-weibo fa-2x"></i></a>
                        <a target="_blank" title="码云" href="https://gitee.com/minghaozhi/events"><i
                                class="fa fa-git fa-2x"></i></a>
                    </div>
                </div>
                <div></div><!--占位-->
                <div class="blog-module shadow">
                    <div class="blog-module-title" style="color: #01a0e4"><i class="fa fa-thumbs-up"></i>最新推荐</div>
                    <ul class="fa-ul blog-module-ul" th:each=" recommendArticle:${isRecommends}">
                        <li><i class="fa-li fa fa-hand-o-right"></i><a
                                th:href="@{/blog/toDetail(id=${recommendArticle.id})}"
                                th:text="${recommendArticle.title}"></a></li>
                    </ul>
                </div>
                <div class="blog-module shadow">
                    <div class="blog-module-title"><i class="fa fa-location-arrow"></i>最近分享</div>
                    <ul class="fa-ul blog-module-ul" th:each=" rescource:${rescources}">
                        <li><i class="fa-li fa fa-hand-o-right"></i><a
                                th:href="@{/blog/toResource}"
                                th:text="${rescource.fileName}"></a></li>
                    </ul>
                </div>
                <div class="blog-module shadow">
                    <div class="layui-tab" lay-filter="demo">
                        <ul class="layui-tab-title" style="border-color: #009688">
                            <li class="layui-this">微信</li>
                            <li class="">支付宝</li>
                            <div style="font-size: 14px;position: relative;line-height: 40px;min-width: 65px;padding: 0 10px;float:right;">
                                赞赏
                            </div>
                            <p style="font-size: 10px;position: relative;line-height: 40px;color:#666;float:right;">
                                (请备注称呼)</p>
                        </ul>
                    </div>
                    <div class="layui-tab-content">
                        <div class="layui-tab-item layui-show">
                            <img style="width:100%;"
                                 src="https://minghaozhi.oss-cn-beijing.aliyuncs.com/pay/weixinpay.jpg" alt="微信打赏">
                        </div>
                        <div class="layui-tab-item">
                            <img style="width:100%;" src="https://minghaozhi.oss-cn-beijing.aliyuncs.com/pay/alipay.jpg"
                                 alt="支付宝打赏">
                        </div>
                    </div>
                </div>
                <div class="blog-module shadow">
                    <div class="blog-module-title">友情链接</div>
                    <ul class="blogroll">
                        <li><a target="_blank" href="http://www.layui.com/" title="Layui">Layui</a></li>
                        <li><a target="_blank" href="https://spring.io/projects/spring-boot/" title="springboot">springboot</a>
                        </li>
                    </ul>
                </div>
                <div class="blog-module shadow">
                    <div class="blog-module-title">最近访客</div>
                    <dl class="vistor" th:each="thirdLoginUser:${list}">
                        <a href="javascript:;"><img th:src="@{${thirdLoginUser.avatar}}"
                                                    class="layui-nav-img userAvatar" width="35" height="35"><cite
                                class="adminName" th:text="${thirdLoginUser.nickName}"></cite></a>
                    </dl>
                </div>
            </div>
            <div class="clear"></div>
        </div>
    </div>
</div>
<!-- 底部 -->
<footer class="blog-footer">
    <wb:share-button addition="simple" type="button" language="zh_cn"></wb:share-button>
    <p><span>Copyright</span><span>&copy;</span><span>2018-2019</span><a href="http://www.moshang.work">墨殇</a><span>Design By moshang</span>
    </p>
    <p><a href="http://www.miibeian.gov.cn/" target="_blank">豫ICP备18034337号</a><a href="/toLogin"
                                                                                  target="_blank">后台登录管理</a></p>
</footer>
<!--侧边导航-->
<ul class="layui-nav layui-nav-tree layui-nav-side blog-nav-left layui-hide" lay-filter="nav">
    <li class="layui-nav-item">
        <a href="/blog/toHome"><i class="fa fa-home fa-fw"></i>&nbsp;网站首页</a>
    </li>
    <li class="layui-nav-item layui-this">
        <a href="/blog/toArticle"><i class="fa fa-file-text fa-fw"></i>&nbsp;文章专栏</a>
    </li>
    <li class="layui-nav-item">
        <a href="/blog/toResource"><i class="fa fa-tags fa-fw"></i>&nbsp;资源分享</a>
    </li>
    <li class="layui-nav-item">
        <a href="/blog/toTimeline"><i class="fa fa-road fa-fw"></i>&nbsp;点点滴滴</a>
    </li>
    <li class="layui-nav-item">
        <a href="/blog/about"><i class="fa fa-info fa-fw"></i>&nbsp;关于本站</a>
    </li>
</ul>
<!--分享窗体-->
<div class="blog-share layui-hide">
    <div class="blog-share-body">
        <div style="width: 200px;height:100%;">
            <div class="bdsharebuttonbox">
                <a class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a>
                <a class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>
                <a class="bds_weixin" data-cmd="weixin" title="分享到微信"></a>
                <a class="bds_sqq" data-cmd="sqq" title="分享到QQ好友"></a>
            </div>
        </div>
    </div>
</div>
<!--遮罩-->
<div class="blog-mask animated layui-hide"></div>
<!-- layui.js -->
<script src="/layui/layui.js"></script>
<!-- 全局脚本 -->
<script src="/js/web/global.js"></script>
<!-- 本页脚本 -->
<script src="/js/web/home.js"></script>
<script type="text/javascript" src="/js/login/main.js"></script>
<script th:inline="javascript" type="text/javascript">
    layui.config({
        base: '/js/common/' //假设这是你存放拓展模块的根目录
    }).use(['laypage','flow', 'layer', 'jquery', 'laydate', 'element','common'], function () {
        var laypage = layui.laypage,
            layer = layui.layer,
            $ = layui.jquery,
            element = layui.element,
            common=layui.common,
             flow = layui.flow,
            laydate = layui.laydate;
        var pcount = [[${pageUtil.count}]];// 总记录数
        flow.load({
            elem: '#demo' //流加载容器
            ,isAtuo:true
            ,done: function(page, next){ //执行下一页的回调
                setTimeout(function(){
                    $.post("/blog/list",{page:page,limit:10}, function(data) {
                        var lis = [];
                        for(var i = 0; i < data.data.data.length; i++){
                            var content=delHtmlTag( data.data.data[i].content);
                            if(content.length>=80){
                                content=content.substring(0,86);
                            }
                            lis.push("<div class=\"article shadow \">\n" +
                                "                		<div class=\"article-left \">\n" +
                                "                			<img src=\""+ data.data.data[i].image+"\" alt=\""+ data.data.data[i].title+"\"/>\n" +
                                "                		</div>\n" +
                                "                		<div class=\"article-right\">\n" +
                                "                        	<div class=\"article-title\">\n");
                            if( data.data.data[i].isTop==1){
                                lis.push("<span class=\"flag flag-left\">置顶</span>&nbsp;");
                            }
                            if( data.data.data[i].isRecommend==1){
                                lis.push("<span class=\"article_is_yc\">推荐</span>&nbsp;");
                            }else{
                                lis.push("<span class=\"article_is_zz\">转载</span>&nbsp;");
                            }
                            lis.push("                        		<a href=\"/blog/toDetail?id="+ data.data.data[i].id+"\">"+ data.data.data[i].title+"</a>\n" +
                                "                        	</div>\n" +
                                "                        	<div class=\"article-abstract\">\n" +
                                "                          	"+content+"</div>\n" +
                                "                        </div>\n" +
                                "                        <div class=\"clear\"></div>\n" +
                                "                        <div class=\"article-footer\">\n" +
                                "	                        <span><i class=\"fa fa-clock-o\"></i>&nbsp;&nbsp;"+ common.dateFtt("yyyy-MM-dd hh:mm:ss",data.data.data[i].createTime)+"</span>\n" +
                                "	                        <span class=\"article-author\"><i class=\"fa fa-user\"></i>&nbsp;&nbsp; "+ data.data.data[i].createName+"</span>\n" +
                                "	                        <span><i class=\"fa fa-tag\"></i>&nbsp;&nbsp;<a href=\"javascript:classifyList("+ data.data.data[i].sort+");\"> "+ data.data.data[i].sortName+"</a></span>\n" +
                                "	                        <span class=\"article-viewinfo\"><i class=\"fa fa-eye\"></i>&nbsp;"+ data.data.data[i].traffic+"</span>\n" +
                                "	                        <span class=\"article-viewinfo\"><i class=\"fa fa-commenting\"></i>&nbsp;"+ data.data.data[i].comments+"</span>\n" +
                                "                    	</div>\n" +
                                "                	</div>");
                        }

                        //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                        //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                        next(lis.join(''), page < data.data.totalPage);
                    });
                });
            }
        });
    //格式化HTML标签
    function delHtmlTag(str){
        return str.replace(/<[^>]+>/g,"");//去掉所有的html标记
    }


        //触发事件
        element.on('tab(demo)', function (data) {
            console.log(this); //当前Tab标题所在的原始DOM元素
            console.log(data.index); //得到当前Tab的所在下标
            console.log(data.elem); //得到当前的Tab大容器
            $(".layui-tab-title li").hover(function () {
                var $i = $(this).index();
                $(this).addClass("layui-this").siblings().removeClass("layui-this");
                $(".layui-tab-content .layui-tab-item").eq($i).addClass("layui-show").siblings().removeClass("layui-show");
            });

        });

    });
    var  redirectUrl=window.location.href;
    function logins(){
        location.href="/qq/auth?status=2&redirectUrl="+redirectUrl;
    }
    function qqloginOut(){
        location.href="/qqloginOut?redirectUrl="+redirectUrl;
    }
</script>
</body>
</html>